<template>
	<el-card>
		<el-form :model="formInline" label-width="80px" class="demo-form-inline">
			<el-form-item label="消息标题">
				<el-input v-model="formInline.msg_title" placeholder="请输入消息标题" />
			</el-form-item>
			<el-form-item label="消息内容">
				<el-input
					v-model="formInline.msg_cont"
					:autosize="{ minRows: 4, maxRows: 40 }"
					type="textarea"
					placeholder="请输入消息内容"
				/>
			</el-form-item>
			<el-form-item label="开始时间">
				<el-date-picker
					v-model="formInline.start_time"
					type="datetime"
					placeholder="请选择开始时间"
					class="datepicker"
					format="YYYY-MM-DD HH:mm:ss"
					value-format="YYYY-MM-DD HH:mm:ss"
				/>
			</el-form-item>
			<el-form-item label="结束时间">
				<el-date-picker
					v-model="formInline.end_time"
					type="datetime"
					placeholder="请选择结束时间"
					class="datepicker"
					format="YYYY-MM-DD HH:mm:ss"
					value-format="YYYY-MM-DD HH:mm:ss"
				/>
			</el-form-item>
			<el-form-item label="接受人">
				<el-input
					v-model="formInline.msg_recipient"
					:value="formInline.msg_recipient == '0' ? '所有人' : formInline.msg_recipient"
					disabled
					placeholder="请输入"
				/>
				<!-- <el-input v-model="formInline.msg_recipient" disabled placeholder="请输入" /> -->
			</el-form-item>
			<el-form-item>
				<el-button type="primary" class="onSubmitBtn" @click="onSubmit">确定</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { postMessage } from '@/utils/api';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const route = useRoute();
const router = useRouter();
const formInline: any = reactive({
	msg_title: '',
	msg_cont: '',
	start_time: '',
	end_time: '',
	msg_recipient: '0',
	id: '',
});
if (route.query.user_id) {
	formInline.msg_recipient = route.query.user_id;
}
if (route.query.id) {
	formInline.id = route.query.id;
}
const onSubmit = () => {
	postMessage(formInline).then((res: any) => {
		ElMessage.success('发布成功');
		router.back();
	});
};
</script>
<style scoped lang="scss">
.demo-form-inline {
	width: 500px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	.datepicker {
		width: 400px;
	}
	.onSubmitBtn {
		width: 100%;
	}
}
</style>
<style>
.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
	width: 100% !important;
}
</style>
